<template>
  <div class="insp">
    <div class="insp-total">
      <div class="insp-total-left">
        <div class="insp-total-top">
          <div class="insp-total-middle">
            <CardContainer headerName="本月病害处理状态统计">
              <template slot="card-content">
                <div class="flex-pie">
                  <div id="typeAnalysis" class="insp-total-typeAnalysis"></div>
                  <div id="chartPie" class="chartPiec"></div>
                </div>
              </template>
            </CardContainer>
          </div>
          <div class="insp-total-middle">
            <CardContainer headerName="本月巡检总数分析">
              <template slot="card-content">
                <div class="posbox">
                  <div class="card_title">
                    <div style="padding: 2px 15px; text-align: center; z-index: 999" :class="{ card_title_select: selectTab_item === 0 }" @click="selectTab(0)">按任务</div>
                    <div style="padding: 2px 15px; text-align: center; z-index: 999" :class="{ card_title_select: selectTab_item === 1 }" @click="selectTab(1)">按桥梁</div>
                  </div>
                </div>

                <div class="card_title_list" v-show="selectTab_item === 0"><div id="sum" class="insp-total-sum"></div></div>
                <div class="card_title_list" v-show="selectTab_item === 1">
                  <div id="chartBar" class="chartBars"></div>
                </div>
              </template>
            </CardContainer>
          </div>
        </div>
        <div class="insp-total-bottom" ref="calendarDiv">
          <el-calendar v-model="value" ref="calendar">
            <template slot="dateCell" slot-scope="{ date, data }">
              <div class="insp-calendar-slot">
                <p :class="data.isSelected ? 'is-selected' : ''">
                  <span class="insp-calendar-day">
                    {{ data.day.split('-').slice(2).join('-') }}
                  </span>
                </p>
                <div v-if="data.day.split('-')[1] === key">
                  <div v-if="calendarData[data.day.split('-').slice(2).join('-')]">
                    <div v-if="calendarData[data.day.split('-').slice(2).join('-')].length > 0">
                      <span
                        :title="calendarData[data.day.split('-').slice(2).join('-')][0]['name']"
                        :class="[
                          'insp-calendar-task',
                          { purple: calendarData[data.day.split('-').slice(2).join('-')][0]['inspType'] === 2 },
                          { green: calendarData[data.day.split('-').slice(2).join('-')][0]['inspType'] === 0 },
                          { orange: calendarData[data.day.split('-').slice(2).join('-')][0]['inspType'] === 1 },
                        ]"
                      >
                        {{ calendarData[data.day.split('-').slice(2).join('-')][0]['name'] }}
                      </span>
                    </div>
                    <div v-if="calendarData[data.day.split('-').slice(2).join('-')].length > 1">
                      <span class="insp-calendar-more"><i class="el-icon-more"></i></span>
                      <div :class="data.isSelected ? 'insp-calendar-moreDIV' : 'insp-calendar-none'">
                        <VuePerfectScrollbar class="scroller" :settings="settings">
                          <h4>当天任务列表</h4>
                          <div class="insp-calendar-taskBox">
                            <span
                              :class="['insp-calendar-taskDiv', { purple: item.inspType === 2 }, { green: item.inspType === 0 }, { orange: item.inspType === 1 }]"
                              @click="
                                (e) => {
                                  handleClickTask(item.id, e)
                                }
                              "
                              v-for="item in calendarData[data.day.split('-').slice(2).join('-')]"
                              :key="item.id"
                              :title="item.name"
                            >
                              {{ item.name }}
                            </span>
                          </div>
                        </VuePerfectScrollbar>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-calendar>
        </div>
      </div>
      <div class="insp-total-right">
        <CardContainer headerName="巡检任务详情">
          <template slot="card-content">
            <div class="insp-total-taskDetail" v-if="taskId">
              <div class="insp-total-taskBox">
                <div class="insp-total-taskBox-header">
                  <label>巡检进度</label>
                </div>
                <div class="insp-total-taskBox-content">
                  <div class="insp-total-timeLine">
                    <TimeLine :status="status"></TimeLine>
                  </div>
                </div>
              </div>
              <div class="insp-total-taskBox">
                <div class="insp-total-taskBox-header">
                  <label>巡检信息</label>
                </div>
                <div class="insp-total-taskBox-content">
                  <div class="insp-total-taskBox-div" v-for="(item, index) in info" :key="index">
                    <span class="insp-total-taskBox-one">{{ item.label }} : </span>
                    <span v-if="item.key === 'staFlag'" :title="statusText(obj[item.key])" class="insp-total-taskBox-two">{{ statusText(obj[item.key]) }}</span>
                    <span v-else-if="item.key === 'createType'" :title="taskTypeText(obj[item.key])" class="insp-total-taskBox-two">{{ taskTypeText(obj[item.key]) }}</span>
                    <span v-else-if="item.key === 'inspType'" :title="inspTypeText(obj[item.key])" class="insp-total-taskBox-two">{{ inspTypeText(obj[item.key]) }}</span>
                    <span v-else class="insp-total-taskBox-two" :title="obj[item.key] ? obj[item.key] : '未知'">{{ obj[item.key] ? obj[item.key] : '未知' }}</span>
                  </div>
                </div>
              </div>
              <div class="insp-total-taskBox insp-total-taskBox-table">
                <div class="insp-total-taskBox-header">
                  <label>巡检记录</label>
                </div>
                <div class="insp-total-taskBox-content insp-total-taskBox-tableDiv" ref="tableDiv">
                  <el-table
                    :data="tableData"
                    stripe
                    :header-cell-style="{
                      color: '#999',
                      height: '44px',
                    }"
                    style="width: 100%; border: 1px solid #ebeef5; border-bottom: 0"
                    :max-height="tableHeight"
                  >
                    <el-table-column prop="ownName" label="桥梁名称" show-overflow-tooltip></el-table-column>
                    <el-table-column prop="ext6" label="病害名称" show-overflow-tooltip> </el-table-column>
                    <el-table-column label="程度" show-overflow-tooltip>
                      <template slot-scope="scope">
                        <span> {{ scope.row['ext3'] ? (JSON.parse(scope.row['ext3'])['level'] === 0 ? '一级' : JSON.parse(scope.row['ext3'])['level'] === 1 ? '二级' : '三级') : '' }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="ext3" label="位置" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="createTime" label="发现时间" show-overflow-tooltip></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
            <div class="insp-total-taskNoData" v-else>
              <img src="@/assets/images/pages/aliNoData.png" class="insp-total-noDataImage" />
            </div>
          </template>
        </CardContainer>
      </div>
    </div>
  </div>
</template>

<script>
import CardContainer from '@/views/healthMonitor/components/CardContainer'
import TimeLine from './components/timeLine'
import echarts from 'echarts'
import moment from 'moment'
import VuePerfectScrollbar from 'vue-perfect-scrollbar'
export default {
  data() {
    return {
      value: new Date(),
      day: '',
      key: '',
      year: '',
      month: '',
      startDate: '',
      selectTab_item: 0,
      endDate: '',
      taskId: null,
      tableHeight: 0,

      typeAnalysis: '',
      pieData: [],
      pieDataName: [],
      chartBar: null,
      chartPie: null,
      sum: '',
      calendarData: {},
      inspTypeData: [],
      diseaseData: [],
      totalData: {},
      status: 0,
      bridgeAllData: [],
      info: [
        {
          key: 'name',
          label: '任务名称',
        },
        {
          key: 'createType',
          label: '任务类型',
        },
        {
          key: 'inspType',
          label: '巡检类型',
        },
        {
          key: 'createUserNmae',
          label: '创建人',
        },
        {
          key: 'staFlag',
          label: '执行状态',
        },
      ],
      obj: {},
      tableData: [],
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 30,
        wheelSpeed: 1,
        swipeEasing: true,
      },
    }
  },
  components: {
    CardContainer,
    TimeLine,
    VuePerfectScrollbar,
  },
  watch: {
    value: function (val) {
      const _date = val
      let _month = _date.getMonth()
      let _year = _date.getFullYear()
      let _startDate = new Date(_year, _month, 1)
      let _endDate = new Date(_year, _month + 1, 0)
      this.startDate = moment(_startDate).format('YYYY-MM-DD HH:mm:ss')
      var timeArr = this.startDate.replace(' ', ':').replace(/\:/g, '-').split('-')
      this.year = timeArr[0]
      this.month = timeArr[1]
      this.endDate = moment(_endDate).format('YYYY-MM-DD HH:mm:ss')
      let _day = parseInt(_date.getDate())
      this.day = _day > 0 && _day < 10 ? `0${_day}` : `${_day}`
      this.key = _month + 1 > 0 && _month + 1 < 10 ? `0${_month + 1}` : `${_month + 1}`

      this.queryCalendar()
      this.queryTaskTotal()
      this.queryTypeTotal()
      this.queryBridgeAll()
      this.queryDisease()
    },
  },
  created() {
    let _date = this.value
    let _month = _date.getMonth()
    let _year = _date.getFullYear()
    let _startDate = new Date(_year, _month, 1)
    let _endDate = new Date(_year, _month + 1, 0)
    this.startDate = moment(_startDate).format('YYYY-MM-DD HH:mm:ss')
    var timeArr = this.startDate.replace(' ', ':').replace(/\:/g, '-').split('-')
    this.year = timeArr[0]
    this.month = timeArr[1]
    this.endDate = moment(_endDate).format('YYYY-MM-DD HH:mm:ss')
    let _day = parseInt(_date.getDate())
    this.day = _day > 0 && _day < 10 ? `0${_day}` : `${_day}`
    this.key = _month + 1 > 0 && _month + 1 < 10 ? `0${_month + 1}` : `${_month + 1}`

    this.queryCalendar()
    this.queryTaskTotal()
    this.queryTypeTotal()
    this.queryDisease()
    this.queryBridgeAll()
  },
  computed: {
    // computedPosition() {
    //   let _deasePosition = this.tableData['ext3'] ? JSON.parse(this.detailInfo['ext3'])['deasePosition'] : []
    //   let _string = _deasePosition ? _deasePosition.map((item) => `${item.split(';')[1]}`).join('/') : ''
    //   return _string
    // },
  },
  mounted() {
    // 监听窗口变化
    window.addEventListener('resize', () => {
      this.typeAnalysis.resize()
      this.drawPieChart.resize()
      this.sum.resize()
      this.drawBarChart.resize()
      this.$nextTick(() => {
        this.$refs.calendar.$el.style.width = this.$refs.calendarDiv.offsetWidth + 'px'
        if (this.taskId) {
          this.tableHeight = this.$refs.tableDiv.offsetHeight + 'px'
        }
      })
    })
    this.$nextTick(() => {
      this.$refs.calendar.$el.style.width = this.$refs.calendarDiv.offsetWidth + 'px'
      if (this.taskId) {
        this.tableHeight = this.$refs.tableDiv.offsetHeight + 'px'
      }
    })
    this.drawPieChart()
  },
  activated() {
    let _date = this.value
    let _month = _date.getMonth()
    let _year = _date.getFullYear()
    let _startDate = new Date(_year, _month, 1)
    let _endDate = new Date(_year, _month + 1, 0)
    this.startDate = moment(_startDate).format('YYYY-MM-DD HH:mm:ss')
    var timeArr = this.startDate.replace(' ', ':').replace(/\:/g, '-').split('-')
    this.year = timeArr[0]
    this.month = timeArr[1]
    this.endDate = moment(_endDate).format('YYYY-MM-DD HH:mm:ss')
    let _day = parseInt(_date.getDate())
    this.day = _day > 0 && _day < 10 ? `0${_day}` : `${_day}`
    this.key = _month + 1 > 0 && _month + 1 < 10 ? `0${_month + 1}` : `${_month + 1}`

    this.queryCalendar()
    this.queryTaskTotal()
    this.queryTypeTotal()
    this.queryBridgeAll()
    this.queryDisease()
  },
  methods: {
    selectTab(val) {
      this.selectTab_item = val
    },
  
    drawBarChart() {
      let bgColor = '#fff',
        fontColor = '#666'
      let chartData = this.bridgeAllData

      let xData = chartData.map((v) => v.name)
      let sData = chartData.map((v) => v.value)

      let lineOption = {
        lineStyle: {
          color: 'rgba(151,151,151,0.5)',
          type: 'dashed',
        },
      }

      this.chartBar = new echarts.init(document.getElementById('chartBar'))
      this.chartBar.setOption({
        backgroundColor: bgColor,
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: '9%',
          right: '3%',
          left: '5%',
          bottom: '20%',
        },
        dataZoom: [
          {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            left: '9%',
            bottom: -20,
            height: 27.5,
            start: 10,
            end: 90, //初始化滚动条
          },
        ],
        xAxis: [
          {
            type: 'category',
            data: xData,
            axisLine: lineOption,
            axisTick: {
              show: false,
            },
            axisLabel: {
              margin: 10,
              color: fontColor,
              textStyle: {
                fontSize: 14,
              },
            },
            splitLine: {
              show: false,
            },
          },
        ],
        yAxis: [
          {
            // splitNumber: 5,
            axisLabel: {
              formatter: '{value}',
              color: fontColor,
            },
            axisTick: {
              show: false,
            },
            axisLine: lineOption,
            splitLine: {
              show: false,
            },
          },
          {
            axisLine: lineOption,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: [
          {
            type: 'bar',
            data: sData,
            barWidth: '10px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: '#00BD89', // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#C9F9E1', // 100% 处的颜色
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      })
    },

    drawPieChart() {
      // const _obj = this.arrayToObj(_data, 'name')
      let _data = this.pieData
      const _obj = this.arrayToObj(_data, 'name')
      this.chartPie = new echarts.init(document.getElementById('chartPie'))
      this.chartPie.setOption({
        color: ['#56D38D', '#FF9F43', '#7467F0'],
        legend: {
          orient: 'vertical',
          top: 'center',
          left: '63%',
          data: ['一级病害', '二级病害', '三级病害'],
          itemWidth: 12,
          itemHeight: 10,
          itemGap: 15,
          formatter: (name) => {
            return `${name}  ${_obj[name]['value']}`
          },
        },
        tooltip: {
          trigger: 'item',
          show: true,
          formatter: '{a} <br/>{b} : {d}%',
        },
        series: [
          {
            name: '病害处理状态统计',
            type: 'pie',
            radius: ['0%', '70%'],
            center: ['35%', '52%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: _data,
          },
        ],
      })
    },
    drawTypeAnalysis() {
      let _data = this.inspTypeData

      const _obj = this.arrayToObj(_data, 'name')
      this.typeAnalysis = new echarts.init(document.getElementById('typeAnalysis'))
      this.typeAnalysis.setOption({
        legend: {
          orient: 'vertical',
          top: 'center',
          left: '2%',
          data: ['待养护', '养护中', '已处理'],
          itemWidth: 12,
          itemHeight: 10,
          itemGap: 15,
          formatter: (name) => {
            return `${name}  ${_obj[name]['value']}`
          },
        },

        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {d}%',
        },

        color: ['#FF9F43', '#56D38D', '#7467F0', '#FBE033'],
        series: [
          {
            name: '病害处理状态统计',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ['35%', '52%'],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: _data,
          },
        ],
      })
    },

    drawSum() {
      let _data = this.totalData || []
      this.sum = new echarts.init(document.getElementById('sum'))
      this.sum.setOption({
        color: ['#FF9F43', '#7467F0', '#56D38D', '#FBE033'],
        tooltip: {
          trigger: 'item',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          data: ['日常巡检', '定期巡检'], //, '特殊巡检'
          right: 2,
          top: 15,
          textStyle: {
            color: '#666666',
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 35,
        },
        grid: {
          left: '3%',
          right: '3%',
          bottom: '20px',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: _data['xAxis'] || [],
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ccc',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ccc',
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
          },
        ],
        series: this.totalData.map((item) => ({
          name: item['name'] || '',
          type: 'bar',
          data: [item['value']] || [],
          barWidth: 10,
        })),
      })
    },
    arrayToObj(arr, key) {
      let _obj = {}
      arr.forEach((item) => {
        _obj[item[key]] = item
      })
      return _obj
    },
    queryCalendar() {
      this.$api.curing
        .queryTaskByDate({
          time: this.startDate,
        })
        .then((response) => {
          if (response.data.success) {
            let _obj = response.data.data
            let _newObj = {}

            Object.keys(_obj).forEach((key) => {
              let _key = ''
              if (parseInt(key) > 0 && parseInt(key) < 10) {
                _key = `0${key}`
              } else {
                _key = `${key}`
              }
              _newObj[_key] = _obj[key]
            })
            this.calendarData = _newObj
            if (_newObj[this.day] && _newObj[this.day].length > 0) {
              this.taskId = _newObj[this.day][0]['id']
              this.queryTaskById(this.taskId)
              this.queryDiseaseListById(this.taskId)
            } else {
              this.taskId = null
            }

            this.$nextTick(() => {
              this.$refs.calendar.$el.style.width = this.$refs.calendarDiv.offsetWidth + 'px'
            })
          }
        })
    },
    queryTaskTotal() {
      this.$api.curing
        .queryTaskTotal({
          time: this.startDate,
        })
        .then((response) => {
          if (response.data.success) {
            this.totalData = response.data.data || []
            this.drawSum()
          }
        })
    },

    queryDisease() {
      this.$api.curing
        .queryDisease({
          year: parseInt(this.year),
          month: parseInt(this.month),
        })
        .then((response) => {
          if (response.data.success) {
            let _obj = response.data.data
            let _deaseData = []
            Object.keys(_obj).forEach((key) => {
              switch (key) {
                case '一级病害':
                  _deaseData.push({
                    name: '一级病害',
                    value: parseInt(_obj[key]),
                  })
                  break
                case '二级病害':
                  _deaseData.push({
                    name: '二级病害',
                    value: parseInt(_obj[key]),
                  })
                  break
                case '三级病害':
                  _deaseData.push({
                    name: '三级病害',
                    value: parseInt(_obj[key]),
                  })
                  break
              }
            })

            this.pieData = _deaseData
            this.drawPieChart()
            // this.drawTypeAnalysis()
          }
        })
    },

    queryTypeTotal() {
      this.$api.curing
        .queryTypeTotal({
          time: this.startDate,
        })
        .then((response) => {
          if (response.data.success) {
            this.inspTypeData = response.data.data || []
            this.drawTypeAnalysis()
            // this.drawPieChart()
          }
        })
    },

    queryBridgeAll() {
      let _userInfo = JSON.parse(localStorage.getItem('userInfo'))
      this.$api.curing
        .queryBridgeAll({
          userId: _userInfo['userid'] || '',
          time: this.startDate,
        })
        .then((response) => {
          if (response.data.success) {
            this.bridgeAllData = response.data.data || []
            this.drawBarChart()
          }
        })
    },
    queryDiseaseListById(val) {
      // let id = 'dfb2b622aaaa4637a6d9446b75a7c56e'
      this.$api.curing.queryDiseaseListById(val).then((response) => {
        this.tableData = response.data.data || []

        // this.detailInfo = response.data.data || {}
        this.tableData.map((item) => {
          let _deasePosition = item['ext3'] ? JSON.parse(item['ext3'])['deasePosition'] : []
          item.ext3 = JSON.stringify(_deasePosition ? _deasePosition.map((items) => `${items.split(';')[1]}`).join('/') : '')
        })
      })
    },

    queryTaskById(val) {
      this.$api.insp.queryTaskById(val).then((response) => {
        if (response.data.success) {
          this.status = response.data.data['staFlag']
          this.obj = response.data.data

          this.$nextTick(() => {
            this.tableHeight = this.$refs.tableDiv.offsetHeight + 'px'
          })
        }
      })
    },
    handleClickTask(val, e) {
      e = event || window.event
      e.stopPropagation()
      this.taskId = val
      this.queryTaskById(val)
      this.queryDiseaseListById(val)
    },
    statusText(type) {
      switch (type) {
        case 0:
          return '计划中'
        case 1:
          return '进行中'
        case 2:
          return '已结束'
        default:
          return ''
      }
    },
    inspPersonText(list) {
      let _text = ''
      list.forEach((item, index) => {
        if (!index) {
          _text += item.userName
        } else {
          _text += `、${item.userName}`
        }
      })
      return _text
    },
    inspStandardText(type) {
      switch (type) {
        case 0:
          return '城市桥梁'
        case 1:
          return '道路桥梁'
      }
    },
    taskTypeText(type) {
      switch (type) {
        case 1:
          return '模板任务'
        case 2:
          return '定时任务'
        case 3:
          return '快速任务'
        case 4:
          return '临时任务'
      }
    },
    inspTypeText(type) {
      switch (type) {
        case 0:
          return '日常巡检'
        case 1:
          return '定期巡检'
        case 2:
          return '特殊巡检'
      }
    },
  },
}
</script>
<style scoped lang="scss">
@import './insp.scss';

/deep/.el-table__header tr,
/deep/.el-table__header th {
  padding: 0;
  height: 44px;
}
.chartPiec {
  position: absolute;
  margin-left: 85px;
  width: 280px;
  height: 200px;
}
.posbox {
  position: relative;
  .card_title {
    position: absolute;
    right: 5px;
    top: -40px;
    width: 148px;
    border-radius: 5px;
    text-align: center;
    display: flex;
    border: 1px solid #eee;
  }
}

.card_title_select {
  background: #5eadff;
  color: #fff;
}
.flex-pie {
  position: relative;

  #chartPie {
    position: absolute;
    left: 168px !important;
    top: 0px;
  }
}
.chartBars {
  width: 563px;
  height: 200px;
}
/deep/.el-table td,
/deep/.el-table th {
  text-align: center;
  font-size: 14px;
}

/deep/.el-table td {
  font-weight: 400;
  color: #333;
  padding: 0;
  height: 44px;
  line-height: 44px;
}

/deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
  background: #fff;
}

/deep/.el-calendar {
  width: 100%;
  height: 100%;
}

/deep/.el-calendar-table {
  border-collapse: separate;
  border-spacing: 2px 2px;
  width: 100%;
  height: 100%;
  background: #fff;
}

/deep/.el-calendar-table thead th {
  padding: 3px 0;
  font-weight: 500;
  text-align: center;
  color: #8998ac;
  background: #edf0f5;
  border-radius: 2px;
  line-height: 30px;
}

/deep/.el-calendar__body {
  padding: 5px 10px;
}

/deep/.el-calendar-table tr td {
  border: 1px solid #ebeef5 !important;
}

/deep/.el-calendar__body {
  height: calc(100% - 53px);
}

/deep/.el-calendar-table tbody {
  height: calc(100% - 50px);
}

/deep/.el-calendar-table tbody td {
  height: calc(100% / 6) !important;
}

/deep/.el-calendar-table .el-calendar-day {
  padding: 4px 8px 0;
  height: 100% !important;
}

.insp-calendar-slot {
  height: 100% !important;
  position: relative;
}

/deep/.el-calendar-table .el-calendar-day p {
  text-align: left;
}

/deep/.el-calendar-table td.is-today {
  .insp-calendar-day {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: linear-gradient(295deg, #74bbf0 0%, #327bdc 100%);
    color: #fff;
    border-radius: 50%;
    line-height: 21px;
    text-align: center;
  }
}

/deep/.el-calendar-table td.is-selected {
  .insp-calendar-day {
    display: inline-block;
    width: 21px;
    height: 21px;
    background: linear-gradient(295deg, #74bbf0 0%, #327bdc 100%);
    color: #fff;
    border-radius: 50%;
    line-height: 21px;
    text-align: center;
  }
}

.insp-calendar-task {
  display: inline-block;
  position: absolute;
  bottom: 4px;
  left: 0;
  padding-left: 8px;
  line-height: 26px;
  font-size: 12px;
  width: 100%;
  height: 26px;
  box-shadow: 0px 0px 4px 0px rgba(116, 103, 240, 0.2);
  border-radius: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.insp-calendar-more {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 14px;
  font-weight: bolder;
  line-height: 21px;
  cursor: pointer;
  color: #327bdc;
}

.insp-calendar-moreDIV {
  display: block;
  position: absolute;
  bottom: 0;
  right: -160px;
  width: 150px;
  height: 190px;
  z-index: 100;
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgba(50, 123, 220, 0.4);
  border-radius: 4px;

  h4 {
    font-size: 13px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #8998ac;
    line-height: 30px;
    text-align: center;
    border-bottom: 1px solid #f7f7f7;
  }

  .insp-calendar-taskBox {
    height: 200px;
    overflow-y: auto;
  }

  .insp-calendar-taskDiv {
    display: block;
    margin-left: 8px;
    padding-left: 8px;
    margin-top: 5px;
    line-height: 26px;
    font-size: 12px;
    width: 126px;
    height: 26px;
    box-shadow: 0px 0px 4px 0px rgba(116, 103, 240, 0.2);
    border-radius: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }
}

.purple {
  background: #e6e3fd;
  border-left: 3px solid #7467f0;
  color: #7467f0;
}

.green {
  background: #e7faef;
  border-left: 3px solid #2ac770;
  color: #2ac770;
}

.orange {
  background: #fee7d0;
  border-left: 3px solid #ff9f43;
  color: #ff9f43;
}

.insp-calendar-none {
  display: none;
}

.scroller {
  width: 100%;
  height: 100%;
}
</style>
